<template>
  <div class="dashboard-container">
    <div class="app-container">
      <el-tabs v-model="activeName">
        <el-tab-pane label="角色管理" name="first">
          <el-row>
            <el-button
              @click="showDialog = true"
              icon="el-icon-plus"
              size="small"
              type="primary"
              >新增角色</el-button
            >
          </el-row>
          <el-table border :data="tableData" style="width: 100%">
            <el-table-column type="index" label="序号" width="80">
            </el-table-column>
            <el-table-column prop="name" label="角色名" width="80">
            </el-table-column>
            <el-table-column prop="description" label="描述"> </el-table-column>
            <el-table-column prop="description" label="操作">
              <template slot-scope="{ row }">
                <el-link type="primary">分配权限</el-link>
                <el-link
                  @click="doEdit(row.id)"
                  style="margin:0 10px;"
                  type="primary"
                  >修改</el-link
                >
                <el-link @click="doDel(row.id)" type="primary">删除</el-link>
              </template>
            </el-table-column>
          </el-table>
          <el-pagination
            style="text-align:center;"
            :current-page.sync="pageInfo.page"
            :page-size="pageInfo.pagesize"
            layout="total, prev, pager, next"
            :total="pageInfo.total"
            @current-change="getRoleList"
          />
        </el-tab-pane>
        <el-tab-pane label="公司信息" name="second">
          <el-form
            :model="comForm"
            style="width:450px;margin:0 anto;"
            label-width="80px"
          >
            <el-form-item label="企业名称">
              <el-input v-model="comForm.name" disabled></el-input>
            </el-form-item>

            <el-form-item label="公司地址">
              <el-input v-model="comForm.companyAddress" disabled></el-input>
            </el-form-item>

            <el-form-item label="公司电话">
              <el-input v-model="comForm.companyPhone" disabled></el-input>
            </el-form-item>

            <el-form-item label="邮箱">
              <el-input v-model="comForm.mailbox" disabled></el-input>
            </el-form-item>
            <el-form-item label="备注">
              <el-input v-model="comForm.remarks" disabled></el-input>
            </el-form-item>
          </el-form>
        </el-tab-pane>
      </el-tabs>

      <el-dialog
        :title="title"
        :visible.sync="showDialog"
        @close="cancelDialog"
      >
        <el-form ref="addForm" :model="addForm" :rules="addRules">
          <el-form-item prop="name" label="角色名称" label-width="120px">
            <el-input v-model="addForm.name" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item prop="description" label="角色描述" label-width="120px">
            <el-input
              v-model="addForm.description"
              autocomplete="off"
            ></el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="cancelDialog">取 消</el-button>
          <el-button type="primary" @click="save">确 定</el-button>
        </div>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import {
  getRoleList,
  delRole,
  addRole,
  editRole,
  getRoleDetail,
  getCompanyDetail
} from '@/api/setting'

import { mapGetters } from 'vuex'
export default {
  name: 'setting',
  data () {
    return {
      comForm: {},
      showDialog: false,
      addForm: {},
      addRules: {
        name: [{ required: true, message: '请输入角色名', trigger: 'blur' }],
        description: [
          { required: true, message: '请输入角色名', trigger: 'blur' }
        ]
      },
      activeName: 'first',
      tableData: [],
      pageInfo: {
        // 页码
        page: 1,
        // 页容量
        pagesize: 10,
        // 数据总量
        total: 1000
      }
    }
  },
  created () {
    this.getRoleList()
    this.getCompanyInfo()
  },
  methods: {
    async getCompanyInfo () {
      let res = await getCompanyDetail(this.companyId)
      this.comForm = res.data
    },
    // 加载数据
    async getRoleList () {
      let res = await getRoleList(this.pageInfo)

      this.pageInfo.total = res.data.total
      this.tableData = res.data.rows
    },
    // 删除的点击事件
    async doDel (id) {
      try {
        await this.$confirm('确定要删除吗?')
        // 调用删除
        await delRole(id)
        // 删除成功弹出提示并加载数据
        this.getRoleList()
        this.$message.success('删除成功!')
      } catch (error) {
        console.log('error')
      }
    },
    save () {
      // 做整个表单验证
      this.$refs.addForm.validate(async val => {
        if (val) {
          if (this.addForm.id) {
            await editRole(this.addForm)
          } else {
            // 全部通过,可以发请求了
            await addRole(this.addForm)
          }
          this.getRoleList()
          this.$message.success(this.title + '成功!')
          // 隐藏对话框
          this.showDialog = false
        }
      })
    },
    cancelDialog () {
      this.addForm = {}
      
      this.$refs.addForm.resetFields()

      this.showDialog = false
    },
    // 修改的点击事件
    async doEdit (id) {
      // 先根据id获取数据
      let res = await getRoleDetail(id)

      // 再赋值给对话框的表单绑定的对象
      this.addForm = res.data
      // 显示对话框
      this.showDialog = true
    }
  },
  computed: {
    ...mapGetters(['companyId']),

    title () {
      return this.addForm.id ? '编辑角色' : '新增角色'
    }
  }
}
</script>

<style lang="scss">
.el-tabs__content {
  padding: 40px 20px;
  .el-table th {
    background-color: #fafafa;
    border-bottom: 2px solid #e8e8e8;
  }
}
</style>
